<template>
  <div v-loading="loading" :style="{height: loading ? '2000px': 'auto'}">
    <el-form ref="form" :model="form" label-width="80px" class="biaodan">
      <el-checkbox-group v-model="form.type">
        <template v-for="item in labelList">
          <el-checkbox :label="item.label" :key="item.id" name="type" class="option" v-if="queryList.indexOf(item.prop) != -1"></el-checkbox>
        </template>
      </el-checkbox-group>
      <el-divider>默认展示数据项</el-divider>
      <el-checkbox checked disabled>客户号</el-checkbox>
      <el-checkbox checked disabled>获客来源</el-checkbox>
      <el-checkbox checked disabled>姓名</el-checkbox>
      <div class="foot">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { getCanAbleFieldList } from '@/api/customer/customerManage'
export default {
  data() {
    return {
      loading: false,
      queryList: [],
      form: {
        type: []
      },
      labelList: [
        { label: '业务条线', prop: 'insuranceType', id: '1' },
        // { label: '获客来源', prop: 'customerWay', id: '2' },
        { label: '源客户号', prop: 'customerId', id: '2' },
        { label: '微信号', prop: 'wechatNo', id: '3' },
        { label: '微信昵称', prop: 'wechatNickname', id: '4' },
        { label: '性别', prop: 'gender', id: '5' },
        { label: '婚姻状况', prop: 'marital', id: '6' },
        { label: '学历', prop: 'education', id: '7' },
        { label: '职业', prop: 'job', id: '8' },
        { label: '国籍', prop: 'nationality', id: '9' },
        { label: '年收入', prop: 'annualIncome', id: '10' },
        { label: '好友状态', prop: 'friendStatus', id: '11' },
        { label: '联系电话', prop: 'phone', id: '12' },
        { label: '保全次数', prop: 'preservationNum', id: '13' },
        { label: '报案次数', prop: 'reportNum', id: '14' },
        { label: '实际赔付次数', prop: 'actualCompenNum', id: '15' },
        { label: '有效保单数', prop: 'validPolicyNum', id: '16' },
        { label: '购买保单数', prop: 'buyPolicyNum', id: '17' },
        { label: '积分总数', prop: 'totalPoint', id: '18' },
        { label: '消费积分', prop: 'consumptionPoint', id: '19' },
        { label: '客户等级', prop: 'customerGrade', id: '20' },
        { label: '是否绑定官微', prop: 'isBindWechat', id: '21' },
        { label: '家庭总资产', prop: 'familyAssets', id: '22' },
        { label: '负债情况', prop: 'liability', id: '23' },
        { label: '配偶姓名', prop: 'spouseName', id: '24' },
        { label: '配偶客户号', prop: 'spouseCustomerId', id: '25' },
        { label: '配偶联系电话', prop: 'spousePhone', id: '26' },
        { label: '跟进阶段', prop: 'followStage', id: '27' },
        { label: '跟进人', prop: 'follower', id: '28' },
        { label: '创建时间', prop: 'createTime', id: '29' },
        { label: '企微添加人', prop: 'wecomAddUser', id: '30' },
        { label: '所属企微群聊', prop: 'wecomGroupChat', id: '31' },
        { label: '分配时间', prop: 'distributionTime', id: '32' },
        { label: '回收时间', prop: 'recoveryTime', id: '33' },
        { label: '二级管理机构', prop: 'secondManOrg', id: '34' },
        { label: '三级管理机构', prop: 'thirdManOrg', id: '35' },
        { label: '四级管理机构', prop: 'fourthManOrg', id: '36' },
        { label: '分配状态', prop: 'distributionState', id: '37' },
        { label: '企微添加状态', prop: 'wecomAddState', id: '38' },
        { label: '企微添加时间', prop: 'wecomAddTime', id: '39' },
        { label: '客户状态', prop: 'customerState', id: '40' },
        { label: '备注', prop: 'remark', id: '41' },
      ]
    }
  },
  mounted() {
    this.getCanAbleFieldListFn();
  },
  methods: {
    getCanAbleFieldListFn() {
      this.loading = true;
      getCanAbleFieldList().then(res => {
        if (res.code == 200) {
          this.queryList = res.data;
        }
        this.loading = false;
      })
    },
    onSubmit() {
      const siftList = []
      this.form.type.forEach(element => {
        this.labelList.forEach(item => {
          if (element == item.label) {
            siftList.push(item)
          }
        })
      })
      sessionStorage.setItem('siftList', JSON.stringify(siftList))
      this.$emit('sendDataList')
    },
    cancel() {
      this.$emit('sendDataList')
      const siftList = JSON.parse(sessionStorage.getItem('siftList')) || []
      if (siftList.length == 0) {
        this.resetList()
      }
    },
    resetList() {
      this.form.type = []
    },
    getLabelList() {
      const siftList = JSON.parse(sessionStorage.getItem('siftList')) || []
      const valueList = []
      siftList.forEach(element => {
        valueList.push(element.label)
      })
      this.form.type = valueList
    }
  }
}
</script>
<style lang="scss" scoped>
.biaodan {
  padding: 0 20px;
}

.option {
  width: 25%;
  font-size: 20px;
  margin: 8px 0;
}

.foot {
  text-align: right;
}
</style>
